<template>
  <div class="doc">
    <!-- 文档页面 -->
    <div class="doc-info">
      <DocumentViewForm :editor="false" :data="tabData.apiVO" @to-debug="toDebug" />
    </div>
    <div class="doc-query">
      <h4 class="title">请求参数</h4>
      <QueryCom :isenable="true" :editor="false" :data="tabData.apiRequestParamsVO" />
    </div>
    <div class="doc-response">
      <h4 class="title">返回响应</h4>
      <ResponseTab :isenable="true" :editor="false" :data="tabData.apiResponseVOS" />
    </div>
    <div class="doc-lasttime" v-if="showUpdatedAt">
      <span>最后修改时间：{{ formatDate2(updateTime) }}</span>
    </div>
    <div class="doc-operate" v-if="exportable">
      <el-button :icon="CopyDocument" text @click="toCopy">克隆</el-button>
      <el-button :icon="Download" text @click="toExport">导出</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import DocumentViewForm from './DocumentViewForm.vue'
import QueryCom from './QueryCom.vue'
import ResponseTab from './ResponseTab.vue';
import { CopyDocument, Download } from '@element-plus/icons-vue'
const emit = defineEmits(['to-debug', 'to-copy', 'to-export'])
import { propTypes } from '@/utils/propTypes'
import { formatDate2 } from '@/utils/formatTime'
const props = defineProps({
  tabData: propTypes.object.def({}),
  editor: propTypes.bool.def(),
  isenable: propTypes.bool.def()
})
const exportable = ref(false)
const showUpdatedAt = ref(false)
const updateTime = ref('')
watch(() => props.tabData, async () => {
  if (props.tabData.info.projectParamas) {
    exportable.value = props.tabData.info.projectParamas.exportable
    showUpdatedAt.value = props.tabData.info.projectParamas.showUpdatedAt
    updateTime.value = props.tabData.info.projectParamas.updateTime
  }
}, {
  deep: true
})

const toDebug = () => {
  emit('to-debug')
}
const toCopy = () => {
  emit('to-copy')
}
const toExport = () => {
  emit('to-export')
}

onMounted(() => {
})
</script>

<style scoped lang="scss">
.doc {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  margin: 2% 0 0 1%;

  &-info {
    .title {
      margin: 0 0 20px;
    }
  }

  &-query {
    margin: 20px 0 30px;
    max-height: 400px;
  }

  &-response {
    margin-bottom: 15px;

    .title {
      margin: 0 0 20px;
    }
  }



  &-lasttime {
    margin-top: 5%;
    color: #667085;
    font-size: 14px;
    font-weight: 400;
  }

  &-operate {
    margin-top: 2%;
  }

  :deep(.pre-tree) {
    height: 100% !important;
  }
}

.title {
  margin: 0;
  padding-top: 24px;
  padding-bottom: 8px;
  color: #344054;
  font-weight: 500;
  font-size: 24px;
}
</style>
